<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>常见问题 | Vben Admin</title>
    <meta name="description" content="一个开箱即用的前端框架">
    <link rel="stylesheet" href="/doc-next/assets/style.ffd1e42f.css">
    <link rel="modulepreload" href="/doc-next/assets/Home.43e6fab2.js">
    <link rel="modulepreload" href="/doc-next/assets/app.9ea9a1e7.js">
    <link rel="modulepreload" href="/doc-next/assets/other_faq.md.e1457c01.lean.js">
    <link rel="modulepreload" href="/doc-next/assets/app.9ea9a1e7.js">
    <meta name="author" content="Vbenjs Team">
    <meta name="keywords" content="vben, vitejs, vite, ant-design-vue, vue">
    <link rel="icon" type="image/svg+xml" href="/logo.svg">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="vue vben admin docs">
    <link rel="icon" href="/favicon.ico">
    <meta name="twitter:title" content="常见问题 | Vben Admin">
    <meta property="og:title" content="常见问题 | Vben Admin">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-172e455d><div class="sidebar-button" data-v-172e455d><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/doc-next/" aria-label="Vben Admin, back to home" data-v-172e455d data-v-dc837cb8><img class="logo" src="/doc-next/logo.png" alt="Logo" data-v-dc837cb8> Vben Admin</a><div class="flex-grow" data-v-172e455d></div><div class="nav" data-v-172e455d><nav class="nav-links" data-v-172e455d data-v-0cf770ed><!--[--><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>指南</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/guide/introduction" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>指南</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/dep/icon" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>深入</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/other/faq" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>其他</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>组件</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/introduction" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>介绍</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/glob/button" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>全局组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/basic" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>常用组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/functional/context-menu" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>函数式组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>相关链接</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://discord.gg/8GuAdwDhj6" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>Discord Chat</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://vvbin.cn/next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>完整版预览</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>完整版源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://vvbin.cn/thin/next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>精简版预览</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vben-admin-thin-next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>精简版源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin-doc" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>文档源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin/blob/main/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>更新日志</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-link" data-v-0cf770ed data-v-5d86132c><a class="item" href="/doc-next/other/donate" data-v-5d86132c>赞助 <!----></a></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav></div><div class="nav-icons" data-v-172e455d><div class="item" data-v-172e455d><button class="nav-btn" aria-label="Toggle Theme" data-v-172e455d><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style="display: none;"><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A7.999 7.999 0 0 0 4 12z" fill="currentColor"></path></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style=""><path d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05L3.515 4.93zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414l-2.121-2.121zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414l2.121-2.121zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414l2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" fill="currentColor"></path></svg></button></div><div class="item" data-v-172e455d><a class="nav-btn" href="https://github.com/anncwb/vue-vben-admin" target="_blank" aria-label="View GitHub Repo" data-v-172e455d><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" data-v-172e455d><path d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z" fill="currentColor"></path></svg></a></div></div><!--[--><!--]--></header><!--[--><aside class="sidebar" data-v-3e48a26e><nav class="nav-links nav" data-v-3e48a26e data-v-0cf770ed><!--[--><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>指南</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/guide/introduction" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>指南</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/dep/icon" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>深入</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/other/faq" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>其他</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>组件</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/introduction" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>介绍</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/glob/button" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>全局组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/basic" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>常用组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/functional/context-menu" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>函数式组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>相关链接</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://discord.gg/8GuAdwDhj6" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>Discord Chat</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://vvbin.cn/next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>完整版预览</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>完整版源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://vvbin.cn/thin/next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>精简版预览</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vben-admin-thin-next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>精简版源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin-doc" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>文档源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin/blob/main/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>更新日志</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-link" data-v-0cf770ed data-v-5d86132c><a class="item" href="/doc-next/other/donate" data-v-5d86132c>赞助 <!----></a></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav><!--[--><!--]--><ul class="sidebar-links" data-v-3e48a26e><!--[--><li class="sidebar-link"><p class="sidebar-link-item">指南</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/introduction">介绍</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/">开始</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/settings">项目配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/router">路由</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/menu">菜单</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/auth">权限</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/mock">Mock&amp;联调</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/component">组件注册</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/design">样式</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/lib">外部模块</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/deploy">构建&amp;部署</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/electron">Electron</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">深入</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/dep/cors">跨域处理</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/dep/icon">图标</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/dep/i18n">国际化</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/dep/lint">项目规范</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/dep/dark">黑暗主题</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">其他</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item active" href="/doc-next/other/faq">常见问题</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#前言">前言</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#关于缓存更新问题">关于缓存更新问题</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#关于修改配置文件的问题">关于修改配置文件的问题</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#esbuild-模式下开启-legacy-打包失败">esbuild 模式下开启 LEGACY 打包失败</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#ant-design-vue-控制台警告">ant-design-vue 控制台警告</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#添加菜单后没显示">添加菜单后没显示</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#imagemin-依赖安装失败">imagemin 依赖安装失败</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#使用-yarn-安装-imagemin-依赖安装失败">使用 yarn 安装 imagemin 依赖安装失败</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#在-linux-内依赖安装失败">在 Linux 内依赖安装失败</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#本地运行报错">本地运行报错</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#tab-页切换后页面空白">tab 页切换后页面空白</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#组件命名问题">组件命名问题</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#我的代码本地开发可以，打包就不行了">我的代码本地开发可以，打包就不行了</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#safari-问题">safari 问题</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#模版区别">模版区别</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#环境问题">环境问题</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#依赖安装问题">依赖安装问题</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#如何保证我的代码能更新到最新代码">如何保证我的代码能更新到最新代码</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#打包文件过大">打包文件过大</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#运行错误">运行错误</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#为什么是-moment-js">为什么是 moment.js</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#控制台路由警告问题">控制台路由警告问题</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#启动报错">启动报错</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#页面报错">页面报错</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#跨域问题">跨域问题</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#接口请求问题">接口请求问题</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#组件库问题">组件库问题</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/other/doubt">常见疑点</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/other/server">测试服务</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- <Slugs /> --><!--]--><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-4c107763><div class="container" data-v-4c107763><!--[--><!--]--><div class="content" data-v-4c107763><div data-v-4c107763><h1 id="常见问题"><a class="header-anchor" href="#常见问题" aria-hidden="true">#</a> 常见问题</h1><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>列举了一些常见的问题。有问题可以先来这里寻找，如果没有可以在 <a href="https://github.com/anncwb/vue-vben-admin/issues" target="_blank" rel="noopener noreferrer">issue</a> 提。</p></div><h2 id="前言"><a class="header-anchor" href="#前言" aria-hidden="true">#</a> 前言</h2><p>遇到问题,可以先从以下几个方面查找</p><ol><li>对应模块的 GitHub 仓库 <a href="https://github.com/anncwb/vue-vben-admin/issues" target="_blank" rel="noopener noreferrer">issue</a> 搜索</li><li>从<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">google</a>搜索问题</li><li>从<a href="https://www.xn--wxtr44c.com" target="_blank" rel="noopener noreferrer">百度</a>搜索问题</li><li>在下面列表找不到问题可以到 issue 提问 <a href="https://github.com/anncwb/vue-vben-admin/issues" target="_blank" rel="noopener noreferrer">issues</a></li><li>如果不是问题类型的，需要讨论的，请到 <a href="https://github.com/anncwb/vue-vben-admin/discussions" target="_blank" rel="noopener noreferrer">discussions</a> 讨论</li></ol><h2 id="关于缓存更新问题"><a class="header-anchor" href="#关于缓存更新问题" aria-hidden="true">#</a> 关于缓存更新问题</h2><p>vben-admin 的项目配置默认是缓存在 <code>localStorage</code> 内，所以版本更新后可能有些配置没改变。</p><p>解决方式是每次更新代码的时候修改 <code>package.json</code> 内的 <code>version</code> 版本号. 因为 localStorage 的 key 是根据版本号来的。所以更新后版本不同前面的配置会失效。重新登录即可</p><p><code>VUE_VBEN_ADMIN__DEVELOPMENT__2.0.3__COMMON__LOCAL__KEY__</code> key 的组成是 [项目名]+[开发环境]+[版本号]+[key]</p><h2 id="关于修改配置文件的问题"><a class="header-anchor" href="#关于修改配置文件的问题" aria-hidden="true">#</a> 关于修改配置文件的问题</h2><p>当修改 <code>.env</code> 等环境文件及 <code>vite.config.ts</code> 文件时，vite 会自动重启服务。</p><p>自动重启有几率出现问题，请重新运行项目即可解决.</p><h2 id="esbuild-模式下开启-legacy-打包失败"><a class="header-anchor" href="#esbuild-模式下开启-legacy-打包失败" aria-hidden="true">#</a> esbuild 模式下开启 LEGACY 打包失败</h2><p>如果将  build.minify 设置为 &#39;esbuild&#39;，且不能启用 LEGACY，否则打包将会报错，两者选其一即可打包。</p><h2 id="ant-design-vue-控制台警告"><a class="header-anchor" href="#ant-design-vue-控制台警告" aria-hidden="true">#</a> ant-design-vue 控制台警告</h2><p>在控制台看到以下警告的原因是 <code>ant-design-vue</code> 会检测是否使用了 <code>babel-plugin-import</code> 来判断是否进行了组件库的按需引入。</p><p>但是项目使用的是 vite 的插件 <a href="https://github.com/anncwb/vite-plugin-style-import" target="_blank" rel="noopener noreferrer">vite-plugin-style-import</a> 来进行按需引入。在 vite 内没必要使用 babel 在转换一次代码了。</p><p>所以想关闭这个警告，得等 ant-design-vue 提供可以关闭该警告的配置。</p><div class="language-bash"><pre><code>You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size. Not support Vite <span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span>
</code></pre></div><h2 id="添加菜单后没显示"><a class="header-anchor" href="#添加菜单后没显示" aria-hidden="true">#</a> 添加菜单后没显示</h2><p>菜单必须和路由匹配才会显示在界面上，所以得确保菜单和对应的路由存在即可显示.</p><h2 id="imagemin-依赖安装失败"><a class="header-anchor" href="#imagemin-依赖安装失败" aria-hidden="true">#</a> imagemin 依赖安装失败</h2><p>由于 imagemin 在国内安装困难，提供以下几个解决方案：</p><ol><li>使用 yarn 在 package.json 内配置（推荐，项目内已集成，前提是必须使用 yarn）</li></ol><div class="language-json"><pre><code><span class="token property">&quot;resolutions&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token property">&quot;bin-wrapper&quot;</span><span class="token operator">:</span> <span class="token string">&quot;npm:bin-wrapper-china&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li>使用 npm,在电脑 host 文件加上如下配置即可</li></ol><div class="language-bash"><pre><code><span class="token number">199.232</span>.4.133 raw.githubusercontent.com
</code></pre></div><h2 id="使用-yarn-安装-imagemin-依赖安装失败"><a class="header-anchor" href="#使用-yarn-安装-imagemin-依赖安装失败" aria-hidden="true">#</a> 使用 yarn 安装 imagemin 依赖安装失败</h2><p>如果使用 yarn 还是不能安装依赖，可以将图片压缩功能移除，移除方法如下：</p><ul><li>在 <code>package.json</code> 内删除 <code>vite-plugin-imagemin</code> 这个依赖。这会导致图片没有压缩，但是可以手动到在线网站进行压缩。这里推荐<a href="https://tinypng.com/" target="_blank" rel="noopener noreferrer">tinypng</a></li><li><ol start="2"><li>注释 <code>vite-plugin-imagemin</code> 插件引用</li></ol></li></ul><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> configImageminPlugin <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;./imagemin&#39;</span><span class="token punctuation">;</span>
<span class="token constant">VITE_USE_IMAGEMIN</span> <span class="token operator">&amp;&amp;</span> vitePlugins<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">configImageminPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="在-linux-内依赖安装失败"><a class="header-anchor" href="#在-linux-内依赖安装失败" aria-hidden="true">#</a> 在 Linux 内依赖安装失败</h2><p>如果执行 <code>yarn install</code> 会出现以下错误：</p><div class="language-bash"><pre><code>gifsicle pre-build <span class="token builtin class-name">test</span> failed
compiling from <span class="token builtin class-name">source</span>
</code></pre></div><p>可能是 linux 服务器需要配置下环境，<code>imagemin</code> 这个会导致依赖安装失败。</p><p>这里以<code>Centos</code>为例</p><ul><li>解决方式 1:</li></ul><ol><li>将以下内容添加到 yum 源</li></ol><div class="language-bash"><pre><code><span class="token punctuation">[</span>nasm<span class="token punctuation">]</span>
<span class="token assign-left variable">name</span><span class="token operator">=</span>The Netwide Assembler
<span class="token assign-left variable">baseurl</span><span class="token operator">=</span>http://www.nasm.us/pub/nasm/stable/linux/
<span class="token assign-left variable">enabled</span><span class="token operator">=</span><span class="token number">1</span>
<span class="token assign-left variable">gpgcheck</span><span class="token operator">=</span><span class="token number">0</span>

<span class="token punctuation">[</span>nasm-testing<span class="token punctuation">]</span>
<span class="token assign-left variable">name</span><span class="token operator">=</span>The Netwide Assembler <span class="token punctuation">(</span>release candidate builds<span class="token punctuation">)</span>
<span class="token assign-left variable">baseurl</span><span class="token operator">=</span>http://www.nasm.us/pub/nasm/testing/linux/
<span class="token assign-left variable">enabled</span><span class="token operator">=</span><span class="token number">0</span>
<span class="token assign-left variable">gpgcheck</span><span class="token operator">=</span><span class="token number">0</span>

<span class="token punctuation">[</span>nasm-snapshot<span class="token punctuation">]</span>
<span class="token assign-left variable">name</span><span class="token operator">=</span>The Netwide Assembler <span class="token punctuation">(</span>daily snapshot builds<span class="token punctuation">)</span>
<span class="token assign-left variable">baseurl</span><span class="token operator">=</span>http://www.nasm.us/pub/nasm/snapshots/latest/linux/
<span class="token assign-left variable">enabled</span><span class="token operator">=</span><span class="token number">0</span>
<span class="token assign-left variable">gpgcheck</span><span class="token operator">=</span><span class="token number">0</span>
</code></pre></div><p>在 <code>/etc/yum.repos.d/</code> 下新建 <code>Centos-Nasm.repo</code>，将以上内容复制到这个文件即可</p><ol start="2"><li>执行 <code>yum install libtool automake autoconf nasm</code></li><li>重新执行 <code>yarn install</code> 即可</li></ol><h2 id="本地运行报错"><a class="header-anchor" href="#本地运行报错" aria-hidden="true">#</a> 本地运行报错</h2><p>由于 vite 在本地没有转换代码，且代码中用到了可选链等比较新的语法。所以本地开发需要使用版本较高的浏览器(<code>Chrome 85+</code>)进行开发</p><h2 id="tab-页切换后页面空白"><a class="header-anchor" href="#tab-页切换后页面空白" aria-hidden="true">#</a> tab 页切换后页面空白</h2><p>这是由于开启了路由切换动画,且对应的页面组件存在多个根节点导致的，在页面最外层添加<code>&lt;div&gt;&lt;/div&gt;</code>即可</p><p><strong>错误示例</strong></p><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 注释也算一个节点 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>text h1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>text h2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><strong>正确示例</strong></p><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>text h1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>text h2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">提示</p><ul><li>如果想使用多个根标签，可以禁用路由切换动画</li><li>template 下面的根注释节点也算一个节点</li></ul></div><h2 id="组件命名问题"><a class="header-anchor" href="#组件命名问题" aria-hidden="true">#</a> 组件命名问题</h2><p>目前在 vite+vue3.0.5 版本中，如果组件命名携带关键字，则可能会导致内存溢出。例如 <code>ImportExcel</code> excel 导入组件。</p><h2 id="我的代码本地开发可以，打包就不行了"><a class="header-anchor" href="#我的代码本地开发可以，打包就不行了" aria-hidden="true">#</a> 我的代码本地开发可以，打包就不行了</h2><p>目前发现这个原因可能有以下，可以从以下原因来排查，如果还有别的可能，可以提交 pr 来告诉我</p><ol><li>使用了 ctx 这个变量，ctx 本身未暴露出在实例类型内，尤大也是说了不要用这个属性。这个属性只是用于内部使用。</li></ol><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getCurrentInstance <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
<span class="token function">getCurrentInstance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>xxxx<span class="token punctuation">;</span>
</code></pre></div><h2 id="safari-问题"><a class="header-anchor" href="#safari-问题" aria-hidden="true">#</a> safari 问题</h2><p>目前在 safari 上面本地开发运行样式会有问题，还未找到原因，有知道的也可以告诉我。</p><h2 id="模版区别"><a class="header-anchor" href="#模版区别" aria-hidden="true">#</a> 模版区别</h2><ul><li><a href="https://github.com/anncwb/vue-vben-admin" target="_blank" rel="noopener noreferrer">Vue-Vben-Admin</a> - 是包含 Demo 示例的,个人建议不要在这上面进行开发。当然，你如果动手能力强的话可以直接改。</li><li><a href="https://github.com/anncwb/vben-admin-thin-next" target="_blank" rel="noopener noreferrer">Vue-Vben-Admin-Thin-Next</a> 精简了代码后的模版项目。适合在这基础上进行二次开发。</li></ul><h2 id="环境问题"><a class="header-anchor" href="#环境问题" aria-hidden="true">#</a> 环境问题</h2><p>如果出现依赖安装报错，启动报错等。先检查电脑环境有没有安装齐全。</p><ul><li>Node 版本必须大于<code>12.0.0</code>不支持 <code>13</code>， 推荐 14 版本。</li><li>Git</li><li>Yarn 最新版</li></ul><h2 id="依赖安装问题"><a class="header-anchor" href="#依赖安装问题" aria-hidden="true">#</a> 依赖安装问题</h2><ul><li>如果依赖安装不了或者启动报错可以先尝试 删除 <code>yarn.lock</code> 和 <code>node_modules</code>，然后重新运行 <code>yarn install</code></li><li>如果依赖安装不了或者报错，可以尝试切换手机热点来进行依赖安装。</li><li>如果还是不行，可以自行配置国内镜像安装。</li><li>也可以在项目根目录创建 <code>.npmrc</code> 文件，内容如下</li></ul><div class="language-bash"><pre><code><span class="token comment"># .npmrc</span>
registry <span class="token operator">=</span> https://registry.npm.taobao.org
</code></pre></div><p>然后重新执行<code>yarn run reinstall</code>等待安装完成即可</p><h2 id="如何保证我的代码能更新到最新代码"><a class="header-anchor" href="#如何保证我的代码能更新到最新代码" aria-hidden="true">#</a> 如何保证我的代码能更新到最新代码</h2><p>如果你使用了该项目进行项目开发。开发之中想同步最新的代码。你可以设置多个源的方式</p><ol><li>克隆代码</li></ol><div class="language-bash"><pre><code><span class="token function">git</span> clone https://github.com/anncwb/vben-admin-thin-next.git
</code></pre></div><ol start="2"><li>添加自己的公司 git 源地址</li></ol><div class="language-bash"><pre><code><span class="token comment"># up 为源名称,可以随意设置</span>
<span class="token comment"># gitUrl为开源最新代码</span>
<span class="token function">git</span> remote <span class="token function">add</span> up gitUrl<span class="token punctuation">;</span>
</code></pre></div><ol start="3"><li>提交代码到自己公司 git</li></ol><div class="language-bash"><pre><code><span class="token comment"># 提交代码到自己公司</span>
<span class="token comment"># main为分支名 需要自行根据情况修改</span>
<span class="token function">git</span> push up main

<span class="token comment"># 同步公司的代码</span>
<span class="token comment"># main为分支名 需要自行根据情况修改</span>
<span class="token function">git</span> pull up main
</code></pre></div><ol start="4"><li>如何同步开源最新代码</li></ol><div class="language-bash"><pre><code><span class="token function">git</span> pull origin main
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>同步代码的时候会出现冲突。只需要把冲突解决即可</p></div><h2 id="打包文件过大"><a class="header-anchor" href="#打包文件过大" aria-hidden="true">#</a> 打包文件过大</h2><ul><li><p>首先，完整版由于引用了比较多的库文件，所以打包会比较大。可以使用精简版来进行开发</p></li><li><p>其次建议开启 gzip，使用之后体积会只有原先 1/3 左右。</p></li></ul><p>gzip 可以由服务器直接开启。如果是这样，前端不需要构建 <code>.gz</code> 格式的文件</p><p>如果前端构建了 <code>.gz</code> 文件，以 nginx 为例，nginx 需要开启 <code>gzip_static: on</code> 这个选项。</p><ul><li>开启 gzip 的同时还可以同时开启 <code>brotli</code>，比 gzip 更好的压缩。两者可以共存</li></ul><p><strong>注意</strong></p><ul><li><p>gzip_static: 这个模块需要 nginx 另外安装，默认的 nginx 没有安装这个模块。</p></li><li><p>开启 <code>brotli</code> 页需要 nginx 另外安装模块</p></li></ul><h2 id="运行错误"><a class="header-anchor" href="#运行错误" aria-hidden="true">#</a> 运行错误</h2><p>如果出现类似以下错误，请检查项目全路径（包含所有父级路径）不能出现中文、日文、韩文。否则将会出现路径访问 404 导致以下问题</p><div class="language-ts"><pre><code><span class="token punctuation">[</span>vite<span class="token punctuation">]</span> Failed to resolve <span class="token keyword">module</span> <span class="token keyword">import</span> <span class="token string">&quot;ant-design-vue/dist/antd.css-vben-adminode_modulesant-design-vuedistantd.css&quot;</span><span class="token punctuation">.</span> <span class="token punctuation">(</span>imported by <span class="token operator">/</span>@<span class="token operator">/</span>setup<span class="token operator">/</span>ant<span class="token operator">-</span>design<span class="token operator">-</span>vue<span class="token operator">/</span>index<span class="token punctuation">.</span>ts<span class="token punctuation">)</span>
</code></pre></div><h2 id="为什么是-moment-js"><a class="header-anchor" href="#为什么是-moment-js" aria-hidden="true">#</a> 为什么是 moment.js</h2><p>很多人问为什么不用<code>dayjs</code>。在项目依赖中可以看到，它是 <a href="https://2x.antdv.com/docs/vue/introduce-cn/" target="_blank" rel="noopener noreferrer">Ant-Design-Vue</a> 内部自带的。</p><p>目前还没有基于 Vite 的 dayjs 替换 momentjs 方案，webpack 已经有了。等以后出现了在进行替换。</p><h2 id="控制台路由警告问题"><a class="header-anchor" href="#控制台路由警告问题" aria-hidden="true">#</a> 控制台路由警告问题</h2><p>如果看到控制台有如下警告，且页面<strong>能正常打开</strong> 可以忽略该警告。</p><p>后续 <code>vue-router</code> 可能会提供配置项来关闭警告</p><p><strong>2.6.1及以上版本已移除此警告</strong></p><div class="language-ts"><pre><code><span class="token punctuation">[</span>Vue Router warn<span class="token punctuation">]</span><span class="token operator">:</span> No match found <span class="token keyword">for</span> location <span class="token keyword">with</span> path <span class="token string">&quot;xxxx&quot;</span>
</code></pre></div><h2 id="启动报错"><a class="header-anchor" href="#启动报错" aria-hidden="true">#</a> 启动报错</h2><p>当出现以下错误信息时，请检查你的 nodejs 版本号是否符合要求</p><div class="language-bash"><pre><code>TypeError: str.matchAll is not a <span class="token keyword">function</span>
at Object.extractor <span class="token punctuation">(</span>vue-vben-admin-main<span class="token punctuation">\</span>node_modules@purge-icons<span class="token punctuation">\</span>core<span class="token punctuation">\</span>dist<span class="token punctuation">\</span>index.js:146:27<span class="token punctuation">)</span>
at Extract <span class="token punctuation">(</span>vue-vben-admin-main<span class="token punctuation">\</span>node_modules@purge-icons<span class="token punctuation">\</span>core<span class="token punctuation">\</span>dist<span class="token punctuation">\</span>index.js:173:54<span class="token punctuation">)</span>

</code></pre></div><h2 id="页面报错"><a class="header-anchor" href="#页面报错" aria-hidden="true">#</a> 页面报错</h2><p>当页面出现以下报错，是因为 /xxx 对应的路由组件内部出现了错误。</p><div class="language-ts"><pre><code> <span class="token function">Uncaught</span> <span class="token punctuation">(</span><span class="token keyword">in</span> promise<span class="token punctuation">)</span> Error<span class="token operator">:</span> Couldn&#39;t resolve component <span class="token string">&quot;default&quot;</span> at <span class="token string">&quot;/xxx&quot;</span>

</code></pre></div><p>可以尝试从以下几点排查</p><ol><li>检查对应组件内部 import 的所有文件是否正确</li><li>检查引入方式是否错误。</li></ol><div class="language-ts"><pre><code><span class="token comment">// 正确的</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> cloneDeep <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;lodash-es&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// 报错</span>
<span class="token keyword">import</span> _ <span class="token keyword">from</span> <span class="token string">&#39;lodash-es&#39;</span><span class="token punctuation">;</span>
</code></pre></div><ol start="3"><li>检查样式是否使用变量及有没有引入对应的变量文件</li><li>检查代码明显的语法错误</li></ol><p>这样就不会是使用的取值忘记 xxx.value 来进行数据获取</p><h2 id="跨域问题"><a class="header-anchor" href="#跨域问题" aria-hidden="true">#</a> 跨域问题</h2><p>参考<a href="./../dep/cors.html">跨域问题</a></p><h2 id="接口请求问题"><a class="header-anchor" href="#接口请求问题" aria-hidden="true">#</a> 接口请求问题</h2><p>proxy 代理不成功，没有代理到实际地址？</p><p>代理只是服务请求代理，这个地址是不会变的。 原理可以简单的理解为，在本地启了一个服务，你先请求了本地的服务，本地的服务转发了你的请求到实际服务器。所以你在浏览器上看到的请求地址还是 <code>http://localhost:8000/xxx</code>。以服务端是否收到请求为准。</p><h2 id="组件库问题"><a class="header-anchor" href="#组件库问题" aria-hidden="true">#</a> 组件库问题</h2><p>跟组件库相关的问题可以查看<a href="https://2x.antdv.com/docs/vue/faq-cn/" target="_blank" rel="noopener noreferrer">常见问题</a></p></div></div><footer class="page-footer" data-v-4c107763 data-v-ddc19c16><div class="edit" data-v-ddc19c16><div class="edit-link" data-v-ddc19c16 data-v-5c10c4bc><a class="link" href="https://github.com/anncwb/vue-vben-admin-doc/edit/main/other/faq.md" target="_blank" rel="noopener noreferrer" data-v-5c10c4bc>为此页提供修改建议 <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5c10c4bc><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-ddc19c16><!----></div></footer><div class="next-and-prev-link" data-v-4c107763 data-v-0002a634><div class="container" data-v-0002a634><div class="prev" data-v-0002a634><a class="link" href="/doc-next/dep/dark" data-v-0002a634><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-0002a634><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-0002a634>黑暗主题</span></a></div><div class="next" data-v-0002a634><a class="link" href="/doc-next/other/doubt" data-v-0002a634><span class="text" data-v-0002a634>常见疑点</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-0002a634><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"2734edcc\",\"readme.md\":\"e1519bf2\",\"dep_cors.md\":\"204fc85f\",\"dep_dark.md\":\"43a11d42\",\"dep_i18n.md\":\"a802b766\",\"dep_icon.md\":\"439f8e1c\",\"dep_lint.md\":\"e8646b9e\",\"components_auth.md\":\"b02963b8\",\"components_basic.md\":\"fca49067\",\"components_click-out-side.md\":\"88043de3\",\"components_code-editor.md\":\"6afcba77\",\"components_collapse-container.md\":\"b2928273\",\"components_count-down.md\":\"c92778a4\",\"components_count-to.md\":\"c17f243c\",\"components_cropper.md\":\"4a855951\",\"components_desc.md\":\"44431141\",\"components_drawer.md\":\"f8ba528e\",\"components_excel.md\":\"d99f9b91\",\"components_flow-chart.md\":\"edffb78e\",\"components_form.md\":\"047930e8\",\"components_icon.md\":\"0ffa2e82\",\"components_introduction.md\":\"7cb286c9\",\"components_json-preview.md\":\"c1dd06c0\",\"components_lazy-container.md\":\"60c806dc\",\"components_loading.md\":\"06300eaf\",\"components_markdown.md\":\"0c696756\",\"components_modal.md\":\"135caed7\",\"components_page.md\":\"28a90d66\",\"components_pop-confirm-button.md\":\"c26f7c65\",\"components_qrcode.md\":\"dac7ed30\",\"components_scroll-container.md\":\"1dffa01f\",\"components_strength-meter.md\":\"d8a0e073\",\"components_table.md\":\"9ffc20f8\",\"components_time.md\":\"364e4fcd\",\"components_tinymce.md\":\"27726c6d\",\"components_transition.md\":\"1c742571\",\"components_tree.md\":\"9f313e94\",\"components_upload.md\":\"5eaac62a\",\"components_verify.md\":\"d40e7d3d\",\"components_virtual-scroll.md\":\"9df7959b\",\"guide_auth.md\":\"7bab7e41\",\"guide_component.md\":\"35361b68\",\"guide_deploy.md\":\"5e737a9c\",\"guide_design.md\":\"12ad7145\",\"guide_electron.md\":\"c05175be\",\"guide_index.md\":\"773f5681\",\"guide_introduction.md\":\"70896801\",\"guide_lib.md\":\"f35e142b\",\"guide_menu.md\":\"a61b3e0c\",\"guide_mock.md\":\"7ad03e52\",\"guide_router.md\":\"4af7d754\",\"guide_settings.md\":\"15dd5414\",\"other_donate.md\":\"a2bcdefe\",\"other_doubt.md\":\"7d012b2e\",\"other_faq.md\":\"e1457c01\",\"other_server.md\":\"3adeb1fd\",\"components_functional_context-menu.md\":\"c6c1cfd3\",\"components_functional_loading.md\":\"b7278715\",\"components_functional_preview.md\":\"90804e55\",\"components_glob_button.md\":\"29118f06\"}")</script>
    <script type="module" async src="/doc-next/assets/app.9ea9a1e7.js"></script>
  </body>
</html>